<template>
  <!-- 起点排行榜 -->
  <div class="top_rank">
    <div class="gender">
      <div class="active">男生</div>
      <div>女生</div>
    </div>
    <div class="rank">
      <div class="rank_title">
        起点月票榜
      </div>
      <div class="rank_list">
        <div class="swiper" ref="topRank" v-if="yuepiaoTab.length">
          <div class="swiper-wrapper" @click="goSearch($event)">
            <div class="swiper-slide"  v-for="tab,index in yuepiaoTab" :key="index">
              <div  v-for="rankItem,n in tab" class="rankItem" :key="rankItem.bid" :data-name="rankItem.bName">
                <div class="cover">
                  <img :src="rankItem.bid|qdImg" alt="">
                </div>
                <div class="rankNum">{{index*5+n+1}}</div>
                <div class="coverRight">
                  <div>
                    <div class="title">{{rankItem.bName}}</div>
                  </div>
                  <div>
                    <div class="author">{{rankItem.bAuth}}</div>
                  </div>
                  <div>
                    <div class="subCat">{{rankItem.subCat}}</div>
                    <div class="count">{{rankItem.cnt}}</div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <Skeleton v-else/>
        <div class="button" @click="goRank">
          查看全部
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import Skeleton from './skeleton.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'TopRank',
  components:{ Skeleton },
  mounted () {
    if (this.yuepiaoTab.length === 0){
      this.getRank()
    } else {
      return new Swiper('.swiper', {
        slidesPerView : 1.2
      })
    }
  },
  methods: {
    goRank (){
      this.$router.push({ name:'Rank' })
    },
    async getRank (){
      this.$store.dispatch('getYuepiao')
    },
    goSearch (e){
      let searchKey = ''
      // 遍历冒泡路径,寻找对应的name
      for (let i = 0; i < e.path.length; i++){
        if (e.path[i].dataset.name){
          searchKey = e.path[i].dataset.name
          console.log(i, searchKey)
          break
        }
      }
      this.$router.push({ name: 'Search', params: { searchKey } })
    }
  },
  computed: {
    ...mapGetters(['yuepiaoTab'])
  },
  watch: {
    yuepiaoTab:{
      handler (){
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper', {
            slidesPerView : 1.2
          })
          console.log(mySwiper)
        })
      }
    }
  },
  filters:{
    qdImg (bid){
      return 'https://bookcover.yuewen.com/qdbimg/349573/bid/300'.replace('bid', bid)
    }
  }

}
</script>

<style lang="less" scoped>
.top_rank{
  .gender{
    display: flex;
    line-height: 40px;
    align-items: baseline;
    padding: 0 5%;
    background: linear-gradient(to bottom ,var(--box-bg),var(--main-bg));
    div{
      font-size: 18px;
      margin-right: 15px;
      letter-spacing: 5px;
    }
    .active{
      font-size: 22px;
      font-weight: 700;
    }
  }
  .rank{
    margin: 0 5%;
    border-radius: 10px;
    padding: 15px 8px ;
    min-height: 20rem;
    background-color: var(--box-bg);
    .rank_list{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 20rem;
    }
    .swiper{
      width: 100%;
      max-width: calc( 90% * 750px);
      margin: 8px auto;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      .swiper-slide:first-child{
        .rankItem:nth-child(-n + 3){
          color: var(--font-active-color);
        }
      }
      .rankItem{
        display: flex;
        justify-content: space-between;
        margin-bottom: .5em;
        .cover{
          width: 20%;
          border-radius: 4px;
          overflow: hidden;
          img{
            width: 100%;
          }
        }
        .rankNum{
          width: 10%;
          line-height: 2;
          text-align: center;
        }
        .coverRight{
          color: var(--icon-color);
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-size: .6em;
          font-weight: 400;
          width: 70%;
          padding-right: 5%;
          &>div{
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }

          .title{
            color: var(--font-color);
            font-size: 1em;
          }

        }
      }

    }
    .button{
        width: 90%;
        font-size: 1.4em;
        line-height: 2.2;
        background-color: var(--main-bg);
        text-align: center;
        margin:0 auto;
        border-radius: 10px;
      }
  }
}
</style>
